<template>
  <div class="content">
    <el-form ref="form1" class="timeForm" :model="form1">
      <div class="head">
        <span>日达配置</span>
        <el-button v-if="!form1.timeGrade.length>0" type="text" @click="dayAdd">新增</el-button>
        <el-button v-else type="text" @click="dayEdit">修改</el-button>
      </div>

      <el-form-item v-for="(item,index) in form1.timeGrade" :key="index">
        <span>用户在当日</span>
        <el-time-select
          v-model="item.startTime"
          format="HH:mm"
          disabled
          value-format="HH:mm"
          placeholder="开始时间"
        />
        <span class="to"> ~ </span>
        <el-time-select
          v-model="item.endTime"
          disabled
          format="HH:mm"
          value-format="HH:mm"
          placeholder="结束时间"
        />
        <span>下单，默认显示当天</span>
        <el-time-select
          v-model="item.deadlineTime"
          disabled
          format="HH:mm"
          value-format="HH:mm"
          placeholder="结束时间"
        />
        <span>前送达</span>
      </el-form-item>
    </el-form>
    <el-form ref="form2" class="timeForm" :model="form2">
      <div class="head">
        <span>大车用户日达配置</span>
        <el-button v-if="!form2.cartTimeGrade.length>0" type="text" @click="add">新增</el-button>
        <el-button v-else type="text" @click="edit">修改</el-button>
      </div>

      <el-form-item v-for="(item,index) in form2.cartTimeGrade" :key="index">
        <span>用户在当日</span>
        <el-time-picker
          v-model="item.startTime"
          format="HH:mm"
          disabled
          value-format="HH:mm"
          placeholder="开始时间"
        />
        <span class="to"> ~ </span>
        <el-time-picker
          v-model="item.endTime"
          disabled
          format="HH:mm"
          value-format="HH:mm"
          placeholder="结束时间"
        />
        <span>下单，默认显示当天</span>
        <el-time-picker
          v-model="item.deadlineTime"
          disabled
          format="HH:mm"
          value-format="HH:mm"
          placeholder="结束时间"
        />
        <span>前送达</span>
      </el-form-item>
    </el-form>
    <appointmentTimeAdd ref="appointmentTimeAdd" />
  </div>
</template>

<script>
  import { appointTimeSettingDayQuery } from '@/api'
  import { mapGetters } from 'vuex'
  import appointmentTimeAdd from './components/appointmentTimeAdd'
  import dayjs from 'dayjs'
  export default {
    name: 'appointmentTime',
    components: {
      appointmentTimeAdd
    },
    data() {
      return {
        form1: {
          timeGrade: []
        },
        form2: {
          cartTimeGrade: []
        },
        formSave: {},
        formSave2: {}
      }
    },
    computed: {
      ...mapGetters([
        'corpSettingData'
      ])
    },
    created() {
      this.getTimePeriod()
      this.getCartTimePeriod()
    },
    methods: {
      async getTimePeriod() {
        const params = {
          dayType: 1
        }
        const res = await appointTimeSettingDayQuery(params)
        if (res && res.data) {
          this.form1.timeGrade = res.data.map((item) => ({
            start: item.startTime,
            end: item.endTime,
            delivery: item.deadlineTime,
            startTime: dayjs(item.startTime).format('HH:mm'),
            endTime: dayjs(item.endTime).format('HH:mm'),
            deadlineTime: dayjs(item.deadlineTime).format('HH:mm')
          }))
        }
      },
      async getCartTimePeriod() {
        const params = {
          dayType: 2
        }
        const res = await appointTimeSettingDayQuery(params)
        if (res && res.data) {
          this.form2.cartTimeGrade = res.data.map((item) => ({
            start: item.startTime,
            end: item.endTime,
            delivery: item.deadlineTime,
            startTime: dayjs(item.startTime).format('HH:mm'),
            endTime: dayjs(item.endTime).format('HH:mm'),
            deadlineTime: dayjs(item.deadlineTime).format('HH:mm')
          }))
        }
      },
      async dayAdd() {
        this.formSave = await this.$refs.appointmentTimeAdd.open('', 1)
        if (this.formSave.dayType === 1) {
          this.form1.timeGrade = this.timeMap(this.formSave.timeGrade)
        }
      },
      async dayEdit() {
        this.formSave = await this.$refs.appointmentTimeAdd.open(this.form1.timeGrade, 1)
        if (this.formSave.dayType === 1) {
          this.form1.timeGrade = this.timeMap(this.formSave.timeGrade)
        }
      },
      async add() {
        this.formSave2 = await this.$refs.appointmentTimeAdd.open('', 2)
        if (this.formSave2.dayType === 2) {
          this.form2.cartTimeGrade = this.timeMap(this.formSave2.timeGrade)
        }
      },
      async edit() {
        this.formSave2 = await this.$refs.appointmentTimeAdd.open(this.form2.cartTimeGrade, 2)
        if (this.formSave2.dayType === 2) {
          this.form2.cartTimeGrade = this.timeMap(this.formSave2.timeGrade)
        }
      },
      timeMap(list) {
        if (list && list.length > 0) {
          return list.map((item) => ({
            start: item.start,
            end: item.end,
            delivery: item.delivery,
            startTime: dayjs(item.start).format('HH:mm'),
            endTime: dayjs(item.end).format('HH:mm'),
            deadlineTime: dayjs(item.delivery).format('HH:mm')
          }))
        } else {
          return []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  .head {
    margin-bottom: 20px;
    /deep/ .el-button {
      margin-left: 20px;
      font-size: 14px;
      &:nth-child(4) {
        margin-left: 40px;
      }
    }
    span {
      font-size: 18px;
      font-weight: 800;
    }
  }
  .timeForm {
    /deep/ .el-date-editor {
      width: 150px;
    }
  }
}

</style>

